<template>
  <div class="signin">
    <div class="dnglu" v-show="!isshow">
      <div class="signin-top">
        <van-nav-bar title="360账号登录" left-arrow @click-left="returntop" />
      </div>

      <!-- 登录 -->
      <div class="signin-box">
        <div class="box-number">
          <div class="number-img">
            <img class="auto-img" src="../assets/zhanghao.png" alt="" />
          </div>
          <input
            ref="inputs"
            class="inputs"
            type="number"
            placeholder="账号/手机号"
          />
        </div>
        <div class="box-number">
          <div class="number-img">
            <img class="auto-img" src="../assets/mima.png" alt="" />
          </div>
          <input
            ref="inputst"
            class="inputst"
            type="number"
            placeholder="密码/账号卫士APP动态码"
          />
        </div>
        <div class="active" @click="pasw">登录</div>
        <div class="number-content">
          <div class="content-left">短信登陆</div>
          <div class="content-rigth">忘记密码</div>
        </div>
        <div class="box-number-zhuce" @click="ShowSignin">手机快速注册</div>
      </div>
    </div>

    <div class="zhuci" v-show="isshow">
      <div class="signin-top">
        <van-nav-bar title="注册360账号" left-arrow @click-left="returntop" />
      </div>

      <!-- 登录 -->
      <div class="signin-box">
        <div class="box-number">
          <div class="number-img">
            <img class="auto-img" src="../assets/zhanghao.png" alt="" />
          </div>
          <input
            ref="inputzc"
            class="inputs"
            type="number"
            placeholder="请输入手机号"
          />
        </div>
        <div class="box-number">
          <div class="number-img">
            <img class="auto-img" src="../assets/mima.png" alt="" />
          </div>
          <input
            ref="inputstzu"
            class="inputst"
            type="number"
            placeholder="请输入密码"
          />
        </div>
        <div class="chebox">
          <input type="checkbox" ref="inpsp" />
          <span class="spans"> 阅读并同意“360用户协议”和“360用户隐私政策”</span>
        </div>
        <div class="active" @click="SigninData">注册</div>
        <div class="number-content">
          <div class="content-rigth">已有360账号</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dl from "../../public/json/dl.json";
export default {
  name: "SignIn",
  data() {
    return {
      dl,
      isshow: false,
      tel: "",
      password: "",
    };
  },
  created() {},

  methods: {
    // 返回上一级
    returntop() {
      this.$router.push({name:"Home"});
      console.log("aaaa", this.$refs.inputzc.value);
    },
    // 判断是否相等
    pasw() {
      let bok = this.$refs.inputs.value;
      let pass = this.$refs.inputst.value;
      let SigInID = JSON.parse(localStorage.getItem("SigInID"));

      console.log("SigInID", SigInID);
      SigInID.forEach((item) => {
        console.log("item=>",item);
        if (item.bookID == bok && item.password == pass) {
          this.$router.push({ name: "Home" });
          this.$toast("登录成功");
        } else {
          this.$toast("账号/密码不正确");
          console.log(12121);
          this.$refs.inputs.value = "";
          this.$refs.inputst.value = "";
        }
      });
      // this.$router.push({name:"Shopping"})
    },
    // 显示注册
    ShowSignin() {
      this.isshow = true;
    },
    // 注册
    SigninData() {
      this.tel = this.$refs.inputzc.value;
      this.password = this.$refs.inputstzu.value;
      let bookID = {
        bookID: this.tel,
        password: this.password,
      };
      console.log(1111);

      if ( this.$refs.inpsp.checked == true && this.tel != "" && this.password != "") {

        window.localStorage.setItem("SigInID", JSON.stringify([bookID]));
        this.isshow = false;
        this.$toast("注册成功");
      }  else {
        this.$toast("请勾选用户协议和隐私政策获取填写正确的密码格式");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.spans {
  margin-top: -2px;
  position: absolute;
  left: 15px;
}
.chebox {
  margin-top: 10px;
  position: relative;
}
.box-number-zhuce {
  height: 45px;
  width: 100%;
  line-height: 45px;
  color: #4b93ff;
  border: 1px solid #4b93ff;
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
}
.number-content {
  display: flex;
  width: 100%;
  color: #4b93ff;
  margin-top: 10px;
  font-size: 14px;
  .content-rigth {
    margin-left: auto;
  }
}
.active {
  background-color: #93beff;
  color: white;
  line-height: 45px;
  text-align: center;
  margin-top: 20px;
  width: 100%;
  height: 45px;
  font-size: 16px;
}
.box-number {
  height: 45px;
  width: 100%;
  border: 1px solid rgb(207, 205, 205);
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.inputs,
.inputst {
  height: 20px;
  width: 100%;
  font-size: 16px;
  border: none;
  outline: none;
}
.number-img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  margin-right: 15px;
}
.signin-box {
  padding: 20px;
  margin-top: 20px;
}
::v-deep .van-icon:before {
  color: #666883;
}
</style>